import React, { useState, useEffect, useRef } from 'react';
import { Card, Row, Col, Statistic, DatePicker, Select, Button, Table, Space, message, Tag, Modal, Drawer, Input, Form, Checkbox } from 'antd';
import { ProCard, ProForm, ProFormText, ProFormSelect, ProFormDateRangePicker, ProFormTextArea } from '@ant-design/pro-components';
import { 
  BugOutlined, 
  ExclamationCircleOutlined, 
  CheckCircleOutlined, 
  DownloadOutlined,
  ReloadOutlined,
  EyeOutlined,
  DeleteOutlined,
  SearchOutlined,
  WarningOutlined,
  CloseCircleOutlined,
  EditOutlined 
} from '@ant-design/icons';
import { EchartsLine, EchartsColumn, EchartsPie, EchartsArea } from '@/components/Charts';
import dayjs from 'dayjs';
import { 
  getErrorLogList, 
  getErrorLogDetail, 
  getErrorLogStatistics,
  exportErrorLogs,
  cleanupErrorLogs,
  resolveErrorLogs,
  getErrorTypeDistribution,
  getErrorTrend 
} from '@/services/logsApi';

const { RangePicker } = DatePicker;
const { Option } = Select;
const { TextArea } = Input;

const ErrorLogs: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [statisticsLoading, setStatisticsLoading] = useState(false);
  const [logs, setLogs] = useState<LOGS.ErrorLogModel[]>([]);
  const [pagination, setPagination] = useState({ current: 1, pageSize: 20, total: 0 });
  const [statistics, setStatistics] = useState<any>(null);
  const [detailVisible, setDetailVisible] = useState(false);
  const [cleanupVisible, setCleanupVisible] = useState(false);
  const [resolveVisible, setResolveVisible] = useState(false);
  const [selectedLog, setSelectedLog] = useState<LOGS.ErrorLogModel | null>(null);
  const [selectedRows, setSelectedRows] = useState<LOGS.ErrorLogModel[]>([]);
  const [searchParams, setSearchParams] = useState<LOGS.ErrorLogListParams>({});
  const actionRef = useRef<any>();

  // 获取错误日志列表
  const fetchLogs = async (params: LOGS.ErrorLogListParams = {}) => {
    setLoading(true);
    try {
      const response = await getErrorLogList({
        page: pagination.current,
        limit: pagination.pageSize,
        ...searchParams,
        ...params,
      });
      
      if (response.code === 200) {
        setLogs(response.data.list);
        setPagination(prev => ({
          ...prev,
          total: response.data.pagination.total,
        }));
      } else {
        message.error(response.message || '获取错误日志失败');
      }
    } catch (error) {
      console.error('获取错误日志失败:', error);
      message.error('获取错误日志失败');
    } finally {
      setLoading(false);
    }
  };

  // 获取统计数据
  const fetchStatistics = async () => {
    setStatisticsLoading(true);
    try {
      const [statsResponse, typeResponse, trendResponse] = await Promise.all([
        getErrorLogStatistics({
          start_date: dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
          end_date: dayjs().format('YYYY-MM-DD'),
        }),
        getErrorTypeDistribution({
          start_date: dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
          end_date: dayjs().format('YYYY-MM-DD'),
        }),
        getErrorTrend({
          start_date: dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
          end_date: dayjs().format('YYYY-MM-DD'),
          granularity: 'day',
        })
      ]);
      
      if (statsResponse.code === 200 && typeResponse.code === 200 && trendResponse.code === 200) {
        setStatistics({
          ...statsResponse.data,
          error_type_distribution: typeResponse.data,
          error_trend: trendResponse.data,
        });
      }
    } catch (error) {
      console.error('获取统计数据失败:', error);
    } finally {
      setStatisticsLoading(false);
    }
  };

  // 查看日志详情
  const handleViewDetail = async (record: LOGS.ErrorLogModel) => {
    try {
      const response = await getErrorLogDetail(record.id);
      if (response.code === 200) {
        setSelectedLog(response.data);
        setDetailVisible(true);
      } else {
        message.error(response.message || '获取日志详情失败');
      }
    } catch (error) {
      console.error('获取日志详情失败:', error);
      message.error('获取日志详情失败');
    }
  };

  // 标记错误为已解决
  const handleResolve = async (values: { resolution_notes: string }) => {
    try {
      const errorLogIds = selectedRows.map(row => row.id);
      const response = await resolveErrorLogs({
        error_log_ids: errorLogIds,
        resolution_notes: values.resolution_notes,
      });
      
      if (response.code === 200) {
        message.success(`成功标记 ${errorLogIds.length} 条错误为已解决`);
        setResolveVisible(false);
        setSelectedRows([]);
        fetchLogs();
        fetchStatistics();
      } else {
        message.error(response.message || '标记失败');
      }
    } catch (error) {
      console.error('标记失败:', error);
      message.error('标记失败');
    }
  };

  // 导出日志
  const handleExport = async (format: 'excel' | 'csv' | 'json') => {
    try {
      await exportErrorLogs({
        log_type: 'error',
        format,
        start_date: dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
        end_date: dayjs().format('YYYY-MM-DD'),
        filters: searchParams,
        include_details: true,
      });
      message.success(`${format.toUpperCase()}文件导出成功`);
    } catch (error) {
      console.error('导出失败:', error);
      message.error('导出失败');
    }
  };

  // 清理日志
  const handleCleanup = async (values: { retention_days: number; dry_run: boolean }) => {
    try {
      const response = await cleanupErrorLogs({
        log_type: 'error',
        retention_days: values.retention_days,
        dry_run: values.dry_run,
      });
      
      if (response.code === 200) {
        message.success(`${values.dry_run ? '预计' : '实际'}清理了 ${response.data.deleted_count} 条日志`);
        if (!values.dry_run) {
          setCleanupVisible(false);
          fetchLogs();
          fetchStatistics();
        }
      } else {
        message.error(response.message || '清理失败');
      }
    } catch (error) {
      console.error('清理失败:', error);
      message.error('清理失败');
    }
  };

  useEffect(() => {
    fetchLogs();
    fetchStatistics();
  }, []);

  // 日志级别颜色映射
  const getLevelColor = (level: string) => {
    const colorMap: Record<string, string> = {
      debug: 'default',
      info: 'blue',
      warn: 'orange',
      error: 'red',
      fatal: 'magenta',
    };
    return colorMap[level] || 'default';
  };

  // 错误类型颜色映射
  const getErrorTypeColor = (errorType: string) => {
    const colorMap: Record<string, string> = {
      'ValidationError': 'orange',
      'DatabaseError': 'red',
      'NetworkError': 'blue',
      'AuthenticationError': 'purple',
      'AuthorizationError': 'magenta',
      'SystemError': 'red',
      'BusinessError': 'orange',
    };
    return colorMap[errorType] || 'default';
  };

  // 表格列配置
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 80,
      sorter: true,
    },
    {
      title: '级别',
      dataIndex: 'level',
      key: 'level',
      width: 100,
      render: (level: string) => (
        <Tag color={getLevelColor(level)}>
          {level.toUpperCase()}
        </Tag>
      ),
      filters: [
        { text: 'WARN', value: 'warn' },
        { text: 'ERROR', value: 'error' },
        { text: 'FATAL', value: 'fatal' },
      ],
    },
    {
      title: '错误类型',
      dataIndex: 'error_type',
      key: 'error_type',
      width: 150,
      render: (errorType: string) => (
        <Tag color={getErrorTypeColor(errorType)}>
          {errorType}
        </Tag>
      ),
      ellipsis: true,
    },
    {
      title: '错误消息',
      dataIndex: 'error_message',
      key: 'error_message',
      width: 300,
      ellipsis: true,
    },
    {
      title: '错误代码',
      dataIndex: 'error_code',
      key: 'error_code',
      width: 120,
      render: (code: string) => code ? (
        <span style={{ fontFamily: 'monospace', fontSize: '12px' }}>
          {code}
        </span>
      ) : '-',
    },
    {
      title: '追踪ID',
      dataIndex: 'trace_id',
      key: 'trace_id',
      width: 120,
      ellipsis: true,
      render: (traceId: string) => traceId ? (
        <span style={{ fontFamily: 'monospace', fontSize: '12px' }}>
          {traceId}
        </span>
      ) : '-',
    },
    {
      title: '用户ID',
      dataIndex: 'user_id',
      key: 'user_id',
      width: 100,
      render: (userId: number) => userId || '-',
    },
    {
      title: 'IP地址',
      dataIndex: 'ip_address',
      key: 'ip_address',
      width: 120,
      render: (ip: string) => ip || '-',
    },
    {
      title: '状态',
      dataIndex: 'is_resolved',
      key: 'is_resolved',
      width: 100,
      render: (isResolved: boolean, record: LOGS.ErrorLogModel) => (
        <Space direction="vertical" size="small">
          <Tag color={isResolved ? 'green' : 'red'} icon={isResolved ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />}>
            {isResolved ? '已解决' : '未解决'}
          </Tag>
          {isResolved && record.resolved_at && (
            <span style={{ fontSize: '12px', color: '#666' }}>
              {dayjs(record.resolved_at).format('MM-DD HH:mm')}
            </span>
          )}
        </Space>
      ),
      filters: [
        { text: '已解决', value: true },
        { text: '未解决', value: false },
      ],
    },
    {
      title: '发生时间',
      dataIndex: 'created_at',
      key: 'created_at',
      width: 150,
      render: (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss'),
      sorter: true,
    },
    {
      title: '操作',
      key: 'actions',
      width: 120,
      fixed: 'right' as const,
      render: (record: LOGS.ErrorLogModel) => (
        <Space>
          <Button
            type="link"
            size="small"
            icon={<EyeOutlined />}
            onClick={() => handleViewDetail(record)}
          >
            详情
          </Button>
          {!record.is_resolved && (
            <Button
              type="link"
              size="small"
              icon={<EditOutlined />}
              onClick={() => {
                setSelectedRows([record]);
                setResolveVisible(true);
              }}
            >
              标记解决
            </Button>
          )}
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: '24px' }}>
      {/* 页面标题和操作栏 */}
      <ProCard
        title="错误日志"
        extra={
          <Space>
            <Button
              icon={<ReloadOutlined />}
              onClick={() => {
                fetchLogs();
                fetchStatistics();
              }}
              loading={loading}
            >
              刷新
            </Button>
            {selectedRows.length > 0 && (
              <Button
                type="primary"
                icon={<EditOutlined />}
                onClick={() => setResolveVisible(true)}
              >
                批量标记解决 ({selectedRows.length})
              </Button>
            )}
            <Button.Group>
              <Button
                icon={<DownloadOutlined />}
                onClick={() => handleExport('excel')}
              >
                导出Excel
              </Button>
              <Button
                icon={<DownloadOutlined />}
                onClick={() => handleExport('csv')}
              >
                导出CSV
              </Button>
              <Button
                icon={<DownloadOutlined />}
                onClick={() => handleExport('json')}
              >
                导出JSON
              </Button>
            </Button.Group>
            <Button
              icon={<DeleteOutlined />}
              onClick={() => setCleanupVisible(true)}
              danger
            >
              清理日志
            </Button>
          </Space>
        }
        style={{ marginBottom: 24 }}
      />

      {/* 统计概览 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} sm={12} md={6}>
          <Card loading={statisticsLoading}>
            <Statistic
              title="总错误数"
              value={statistics?.error_logs?.total_count || 0}
              prefix={<BugOutlined />}
              valueStyle={{ color: '#ff4d4f' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card loading={statisticsLoading}>
            <Statistic
              title="今日错误"
              value={statistics?.error_logs?.today_count || 0}
              prefix={<ExclamationCircleOutlined />}
              valueStyle={{ color: '#fa8c16' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card loading={statisticsLoading}>
            <Statistic
              title="已解决"
              value={statistics?.error_logs?.resolved_count || 0}
              prefix={<CheckCircleOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card loading={statisticsLoading}>
            <Statistic
              title="解决率"
              value={statistics?.error_logs?.resolution_rate || 0}
              precision={1}
              suffix="%"
              prefix={<CheckCircleOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 统计图表 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} lg={12}>
          <ProCard title="错误趋势分析" loading={statisticsLoading}>
            <EchartsArea
              data={statistics?.error_trend || []}
              xField="date"
              yField="count"
              smooth={true}
              color="#ff4d4f"
              areaStyle={{
                fill: 'l(270) 0:#ffffff 0.5:#ff4d4f 1:#ff4d4f',
              }}
              height={250}
            />
          </ProCard>
        </Col>
        <Col xs={24} lg={12}>
          <ProCard title="错误类型分布" loading={statisticsLoading}>
            <EchartsPie
              data={statistics?.error_type_distribution || []}
              angleField="count"
              colorField="error_type"
              radius={0.8}
              label={{
                type: 'outer',
                content: '{name}: {percentage}',
              }}
              height={250}
            />
          </ProCard>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} lg={8}>
          <ProCard title="错误级别分布" loading={statisticsLoading}>
            <EchartsColumn
              data={statistics?.error_logs?.level_distribution || []}
              xField="level"
              yField="count"
              color="#fa8c16"
              columnWidthRatio={0.8}
              meta={{
                level: { alias: '级别' },
                count: { alias: '错误数量' },
              }}
              height={250}
            />
          </ProCard>
        </Col>
        <Col xs={24} lg={8}>
          <ProCard title="24小时错误分布" loading={statisticsLoading}>
            <EchartsLine
              data={statistics?.error_logs?.hourly_distribution || []}
              xField="hour"
              yField="count"
              smooth={true}
              color="#ff4d4f"
              point={{
                size: 3,
                shape: 'circle',
              }}
              height={250}
            />
          </ProCard>
        </Col>
        <Col xs={24} lg={8}>
          <ProCard title="解决状态分布" loading={statisticsLoading}>
            <EchartsPie
              data={[
                { status: '已解决', count: statistics?.error_logs?.resolved_count || 0 },
                { status: '未解决', count: (statistics?.error_logs?.total_count || 0) - (statistics?.error_logs?.resolved_count || 0) },
              ]}
              angleField="count"
              colorField="status"
              radius={0.8}
              label={{
                type: 'outer',
                content: '{name}: {percentage}',
              }}
              height={250}
            />
          </ProCard>
        </Col>
      </Row>

      {/* 搜索表单 */}
      <ProCard style={{ marginBottom: 24 }}>
        <ProForm
          layout="horizontal"
          submitter={{
            render: (props, doms) => (
              <Row>
                <Col span={14} offset={5}>
                  <Space>
                    <Button
                      type="primary"
                      icon={<SearchOutlined />}
                      onClick={() => {
                        props.form?.validateFields().then((values) => {
                          const params = {
                            ...values,
                            start_date: values.dateRange?.[0]?.format('YYYY-MM-DD'),
                            end_date: values.dateRange?.[1]?.format('YYYY-MM-DD'),
                          };
                          delete params.dateRange;
                          setSearchParams(params);
                          setPagination(prev => ({ ...prev, current: 1 }));
                          fetchLogs(params);
                        });
                      }}
                    >
                      搜索
                    </Button>
                    <Button
                      onClick={() => {
                        props.form?.resetFields();
                        setSearchParams({});
                        setPagination(prev => ({ ...prev, current: 1 }));
                        fetchLogs({});
                      }}
                    >
                      重置
                    </Button>
                  </Space>
                </Col>
              </Row>
            ),
          }}
        >
          <Row gutter={16}>
            <Col span={6}>
              <ProFormSelect
                name="level"
                label="错误级别"
                placeholder="请选择错误级别"
                options={[
                  { label: 'WARN', value: 'warn' },
                  { label: 'ERROR', value: 'error' },
                  { label: 'FATAL', value: 'fatal' },
                ]}
              />
            </Col>
            <Col span={6}>
              <ProFormText
                name="error_type"
                label="错误类型"
                placeholder="请输入错误类型"
              />
            </Col>
            <Col span={6}>
              <ProFormText
                name="error_code"
                label="错误代码"
                placeholder="请输入错误代码"
              />
            </Col>
            <Col span={6}>
              <ProFormSelect
                name="is_resolved"
                label="解决状态"
                placeholder="请选择解决状态"
                options={[
                  { label: '已解决', value: true },
                  { label: '未解决', value: false },
                ]}
              />
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={6}>
              <ProFormText
                name="trace_id"
                label="追踪ID"
                placeholder="请输入追踪ID"
              />
            </Col>
            <Col span={6}>
              <ProFormText
                name="user_id"
                label="用户ID"
                placeholder="请输入用户ID"
              />
            </Col>
            <Col span={6}>
              <ProFormText
                name="ip_address"
                label="IP地址"
                placeholder="请输入IP地址"
              />
            </Col>
            <Col span={6}>
              <ProFormDateRangePicker
                name="dateRange"
                label="发生时间"
                placeholder={['开始时间', '结束时间']}
              />
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <ProFormText
                name="keyword"
                label="关键词"
                placeholder="搜索错误消息内容"
              />
            </Col>
          </Row>
        </ProForm>
      </ProCard>

      {/* 错误日志表格 */}
      <ProCard>
        <Table
          columns={columns}
          dataSource={logs}
          rowKey="id"
          loading={loading}
          rowSelection={{
            selectedRowKeys: selectedRows.map(row => row.id),
            onChange: (selectedRowKeys, selectedRows) => {
              setSelectedRows(selectedRows);
            },
            getCheckboxProps: (record) => ({
              disabled: record.is_resolved,
            }),
          }}
          pagination={{
            current: pagination.current,
            pageSize: pagination.pageSize,
            total: pagination.total,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条记录`,
            onChange: (page, pageSize) => {
              setPagination(prev => ({ ...prev, current: page, pageSize: pageSize || 20 }));
              fetchLogs({ page, limit: pageSize });
            },
          }}
          scroll={{ x: 1800 }}
          size="small"
        />
      </ProCard>

      {/* 错误详情抽屉 */}
      <Drawer
        title="错误日志详情"
        width={900}
        open={detailVisible}
        onClose={() => setDetailVisible(false)}
        destroyOnClose
      >
        {selectedLog && (
          <div>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Card title="基本信息" size="small">
                  <p><strong>日志ID:</strong> {selectedLog.id}</p>
                  <p><strong>错误级别:</strong> <Tag color={getLevelColor(selectedLog.level)}>{selectedLog.level.toUpperCase()}</Tag></p>
                  <p><strong>错误类型:</strong> <Tag color={getErrorTypeColor(selectedLog.error_type)}>{selectedLog.error_type}</Tag></p>
                  <p><strong>错误代码:</strong> {selectedLog.error_code || '-'}</p>
                  <p><strong>发生时间:</strong> {dayjs(selectedLog.created_at).format('YYYY-MM-DD HH:mm:ss')}</p>
                </Card>
              </Col>
              <Col span={12}>
                <Card title="上下文信息" size="small">
                  <p><strong>追踪ID:</strong> {selectedLog.trace_id || '-'}</p>
                  <p><strong>用户ID:</strong> {selectedLog.user_id || '-'}</p>
                  <p><strong>IP地址:</strong> {selectedLog.ip_address || '-'}</p>
                  <p><strong>请求URL:</strong> {selectedLog.request_url || '-'}</p>
                  <p><strong>请求方法:</strong> {selectedLog.request_method || '-'}</p>
                </Card>
              </Col>
            </Row>
            <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
              <Col span={24}>
                <Card title="错误消息" size="small">
                  <p style={{ wordBreak: 'break-all' }}>{selectedLog.error_message}</p>
                </Card>
              </Col>
            </Row>
            {selectedLog.stack_trace && (
              <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
                <Col span={24}>
                  <Card title="堆栈跟踪" size="small">
                    <pre style={{ fontSize: '12px', maxHeight: '300px', overflow: 'auto', backgroundColor: '#f5f5f5', padding: '12px' }}>
                      {selectedLog.stack_trace}
                    </pre>
                  </Card>
                </Col>
              </Row>
            )}
            {selectedLog.context_data && (
              <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
                <Col span={24}>
                  <Card title="上下文数据" size="small">
                    <pre style={{ fontSize: '12px', maxHeight: '200px', overflow: 'auto' }}>
                      {JSON.stringify(selectedLog.context_data, null, 2)}
                    </pre>
                  </Card>
                </Col>
              </Row>
            )}
            <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
              <Col span={24}>
                <Card title="解决状态" size="small">
                  <p><strong>状态:</strong>
                    <Tag color={selectedLog.is_resolved ? 'green' : 'red'} icon={selectedLog.is_resolved ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />}>
                      {selectedLog.is_resolved ? '已解决' : '未解决'}
                    </Tag>
                  </p>
                  {selectedLog.is_resolved && (
                    <>
                      <p><strong>解决时间:</strong> {dayjs(selectedLog.resolved_at).format('YYYY-MM-DD HH:mm:ss')}</p>
                      <p><strong>解决人员:</strong> {selectedLog.resolved_by}</p>
                      {selectedLog.resolution_notes && (
                        <p><strong>解决说明:</strong> {selectedLog.resolution_notes}</p>
                      )}
                    </>
                  )}
                </Card>
              </Col>
            </Row>
            <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
              <Col span={24}>
                <Card title="User Agent" size="small">
                  <p style={{ fontSize: '12px', wordBreak: 'break-all' }}>{selectedLog.user_agent}</p>
                </Card>
              </Col>
            </Row>
          </div>
        )}
      </Drawer>

      {/* 标记解决模态框 */}
      <Modal
        title="标记错误为已解决"
        open={resolveVisible}
        onCancel={() => setResolveVisible(false)}
        footer={null}
        destroyOnClose
      >
        <Form
          layout="vertical"
          onFinish={handleResolve}
        >
          <Form.Item
            name="resolution_notes"
            label="解决说明"
            rules={[{ required: true, message: '请输入解决说明' }]}
          >
            <TextArea rows={4} placeholder="请详细描述错误的解决方案和处理过程" />
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                确认标记
              </Button>
              <Button onClick={() => setResolveVisible(false)}>
                取消
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {/* 清理日志模态框 */}
      <Modal
        title="清理错误日志"
        open={cleanupVisible}
        onCancel={() => setCleanupVisible(false)}
        footer={null}
        destroyOnClose
      >
        <Form
          layout="vertical"
          onFinish={handleCleanup}
        >
          <Form.Item
            name="retention_days"
            label="保留天数"
            rules={[{ required: true, message: '请输入保留天数' }]}
            initialValue={30}
          >
            <Input type="number" placeholder="请输入保留天数" addonAfter="天" />
          </Form.Item>
          <Form.Item
            name="dry_run"
            label="预览模式"
            valuePropName="checked"
            initialValue={true}
          >
            <Checkbox>仅预览，不实际删除</Checkbox>
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                执行清理
              </Button>
              <Button onClick={() => setCleanupVisible(false)}>
                取消
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default ErrorLogs;
